<%@ page language="java" contentType="text/html; charset=EUC-KR" pageEncoding="EUC-KR"%>
<html>
<head>
<title>TMI Login Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
<link type="text/css" href="/css/login.css" rel="stylesheet" />
<%@ include file="/view/include/css-include.jsp"%>
<%@ include file="/view/include/jsp-include.jsp"%>
<%@ include file="/view/include/jquery-include.jsp"%>
<%@ include file="/view/include/jquery-include.jsp"%>
<script type="text/javascript" src="/js/jquery-marquee.js" ></script>
<script language=javascript>
<!--
function on(){document.regform.loginId.focus();}

function login(orderCode){  
	
	var loginId    = $("#loginId").val();
    var userPassword      = $("#userPassword").val();
    
    if(loginId==null    || loginId=="") {   alert("ID required!!");$("#loginId").focus(); return; }
    if(userPassword==null    || userPassword=="") {   alert("PW required!!"); $("#userPassword").focus(); return; }
    
    $.post(
            '/common/login/login.json', {
                loginId : $("#loginId").val(),
                userPassword : $("#userPassword").val()
            },
        function(data) {
                if(data.nResult == 1){
                    location.href = "/main.html";
                }else{
                	closeBlockUI();
                    alert("ID and PW checking!!!");
                    $("#loginId").val("");
                    $("#userPassword").val("");
                }
        });
}

function showMsg(str) {
    $.blockUI({ 
        message: str,
        css: { 
            border: 'none', 
            padding: '15px',
            left: ($(window).width() - 300) /2 + 'px', 
            width: '300px', 
            textAlign: 'center', 
            backgroundColor: '#000', 
            opacity: .5, 
            color: '#fff',
            cursor: 'wait', 
            fadeOut: 100          
        }, 
        overlayCSS:  { 
            backgroundColor: 'white',
            opacity:         0.5 
        },
        
        centerX: true,
          centerY: true
    }); 
}

function closeBlockUI(){
    $.unblockUI();
}

function onMainPop(){
    window.open('/mainPop.html', 'mainPop', 'width=500, height=540, toolbar=no, location=no, status=no, menubar=no, scrollbars=no');
}

</script>
</head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td height="600" align="center">
        <table width="100%" border="0" cellspacing="0" cellpadding="0">
            <tr>
                <td height="355" align="center" background="/images/login/bg.jpg">
                    <table width="934" border="0" cellspacing="0" cellpadding="0">
                        <tr>
                            <td height="355" align="right" valign="top" background="/images/login/bg_login3.jpg">
                                <table width="710" border="0" cellspacing="0" cellpadding="0">
                                    <tr>
						                <td width="386" height="180">&nbsp;</td>
						                <td width="265" rowspan="2" valign="top">
                                            <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                                <tr>
                                                    <td height="85">
                                                    </td>
                                                </tr>                    
                                                <tr rowspan="2">
						                            <td height="195">                                                               
						                                                                  
						                            </td>
                                                </tr>
                                                <tr>
                                                    <td height="50" align="center">
                                                        <a href="javascript:onMainPop()"><img src="/images/login/button01.gif" width="154" height="28" /></a>
                                                    </td>
                                                </tr>
                                            </table>
                                        </td>
                                        <td width="59" rowspan="2">&nbsp;
                                        </td>
                                    </tr>
						            <tr>
						                <td height="155" align="left" valign="top">
						                    <table width="320" border="0" cellspacing="0" cellpadding="0">
						                      <tr>
						                        <td width="63%" height="25">
						                            <span style="padding : 1 0 3 0">
						                                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" id="loginId" name="loginId" style="width:85%;" />
						                            </span>
						                        </td>
						                        <td width="37%" rowspan="2" align="center" rowspan="2">
						                            <a href="javascript:login();"><img src="/images/login/button.gif" width="84" height="45" /></a>
						                        </td>
						                      </tr>
						                      <tr>
						                        <td height="25">
						                            <span style="padding : 1 0 3 0">
						                                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="password" id="userPassword" name="userPassword" style="width:85%;" onkeydown="javascript:if(event.keyCode==13){login();}"/>
						                            </span>
						                        </td>
						                      </tr>
						                     </table>
						                    </td>
						                  </tr>             
                                        </table>
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</body>
</html>